<template>
	<view class="cascade_box" :animation="animationData">
		<view class="cascade_hei" :class="canShow ? 'cascade_hei_sh' : ''" @touchmove.stop.prevent="moveHandle"></view>
		<view class="cascade_find" :class="canShow ? 'cascade_find_sh' : ''">
            <view class="cascade_notice" v-if="notice">
                <view>应上海条例要求：</view>
                <view>商家不得主动向您提供一次性餐具，请按需选择餐具数量。</view>
            </view>
            <view class="cascade_header">
                <text class='quxiao' @click="cancelEvent()">取消</text>
                <text class="queren" @click="enterEvent()">确认</text>
            </view>
            <picker-view indicator-style="height: 80rpx;" style="width: 100%; height: 400rpx;" :value="value" @change="bindChange">
                <picker-view-column  :style="{flex: column1}">
                  <view v-for="(item, index) in prov" :key='index' >{{item}}</view>
                </picker-view-column>
                <picker-view-column  :style="{flex: column2}">
                  <view v-for="(item, index) in city" :key='index'>{{item}}</view>
                </picker-view-column>
                <picker-view-column :style="{flex: column3}">
                  <view v-for="(item, index) in school" :key='index'>{{item}}</view>
                </picker-view-column>
            </picker-view>
            <view class="cascade_can" v-if="canShow">
                <view class="cascade_can_title">后续订单餐具设置</view>
                <view class="cascade_can_ck">
                    <view class='cascade_can_option' @click='changeIsCan(1)'>
                        <view class="ck-icon" :class="is_can==1 ? 'checked' : ''"></view>
                        <text class=''>依据餐量提供</text>
                    </view>
                    <view class='cascade_can_option' @click='changeIsCan(2)'>
                        <view class="ck-icon" :class="is_can==2 ? 'checked' : ''"></view>
                        <text class=''>无需餐具</text>
                    </view>
                </view>
           </view>
		</view>
	</view>
</template>
<script>
	export default {
		name: "cascade-box",
		props: {
			animationData: {
				type: Object,
				value: {}
			},
			schoolId: {
				type: String,
				value: '16'
			},
			prov:{
				type: Array,
				value: ['上海']
			},
			city:{
				type: Array,
				value: ['上海']
			},
			school:{
				type: Array,
				value: ['学校1','学校2']
			},
            notice:{
                type:Boolean,
                value:false
            },
            canShow:{
                type:Boolean,
                value:false
            },
            is_can:{
                type:Number,
                value:0
            },
            value:{
                type:Array,
                value:[]
            },
            column1:{
                type:Number,
                value:1
            },
            column2:{
                type:Number,
                value:1
            },
            column3:{
                type:Number,
                value:2.5
            },
		},
		data() {
			return {
				
			}
		},
		onLoad() {
				//console.log(getApp().globalData.navHeight);
		},
		methods: {
			cancelEvent: function(e){
				this.$emit('cascadeCancel');
			},
			enterEvent: function(e){
				this.$emit('cascadeEnter');
			},
			bindChange: function(e){
				this.$emit('cascadeChange',e);
			},
            changeIsCan: function(e){
                this.$emit('changeIsCan',e);
            }
		}
	} 
</script>

<style>
.cascade_box{
    font-size:30rpx;
    width: 100%;
    height: 0;
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 99999;
}
.cascade_hei{
    width: 100%;
    height:832rpx;
    background: #000;
    opacity: 0.5;
}
.cascade_hei.cascade_hei_sh{
    height: 560rpx;
}
.cascade_find.cascade_find_sh{
    height: 800rpx;
}
.cascade_find.cascade_find_sh picker-view-column:first-child{
    flex:1
}
.cascade_find.cascade_find_sh picker-view-column:last-child{
    flex: 1;
}
.cascade_find.cascade_find_sh picker-view-column view{
    justify-content: center;
}
.cascade_find{
    width: 100%;
    height: 500rpx;
    position: relative;
    /*bottom: 0;
    left: 0;*/
    background: #fff;
}
.cascade_header{
    /* border-bottom: 1rpx solid #EAEAEA; */
    height: 80rpx;
    /* margin-bottom: 20rpx; */
    display: flex;
    align-items: center;
    justify-content: center;
}
.quxiao,.queren{
    height: 100%;
    line-height: 88rpx;
    display: block;
    color: #888;
    flex:1;
    padding: 0 24rpx;
}
.queren{
    color: #09BB07;
    text-align: right;
}
.cascade_can_title{
    color: #999999;
    flex:1;
    font-weight: 500;
    text-align: center;
    margin: 0 0 28rpx 0;
}
.cascade_notice{
  color: #FF893F;
  font-size: 22rpx;
  padding: 26rpx 24rpx;
  background: #FFF4DE;
}
 picker-view-column view{
    white-space: nowrap;
    height: 80rpx;
    width:100%;
    display:flex;
    align-items:center;
 }
picker-view-column:first-child view{
    justify-content: center;
}
picker-view-column:first-child{
    flex:1.5
}
picker-view-column:last-child{
    flex: 2;
}
.cascade_box .ck-icon{
  width: 30rpx;
  height: 30rpx;
  margin-right: 12rpx;
}

.cascade_can{
  height: 126rpx;
  margin: 0rpx 40rpx;
  background: #F8F8F8;
  font-size: 24rpx;
  padding-top:28rpx;
}

.cascade_can_ck{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cascade_can_option{
  flex:1;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ck-icon{
   background: url("http://img1.birdback.org/a/7b/f5/7bf5c4cac0d51912e431c10a306dd77e.png") no-repeat;
    background-size: 100% 100%;
}
.ck-icon.checked{
    background: url("http://img1.birdback.org/a/7e/9a/7e9a2c6628169a24d5d54df64b6b9042.png")no-repeat;
    background-size: 100% 100%;
}
</style>
